<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客服列表</title>
    <link rel="stylesheet" href="__mobile_static__/css/remove_apple.css">
    <link rel="stylesheet" href="__mobile_static__/css/index.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <script src="__static__/js/jquery.min.js"></script>
    <script src="__mobile_static__/js/adapt_window.js"></script>
</head>
<body>
    <div id="header" >
        <div class="left go_back" onclick="javascript:window.history.go(-1);"></div>
        <div class="left title">机械猫喵喵 ({:count($client_list)})</div>
        <div class="clearfix"></div>
    </div>
    <div id="main" >
        <div class="client_list">
            <dl>
                {foreach name="client_list" item="client"}
                <dd venderid="{$client.enc_client_id}"  is_kf="{if condition="isset($client.kf_id) && $client.kf_id > 0"}1{else}0{/if}">
                    <img  class="left userPhoto" src="{if condition="isset($client.kf_id) && $client.kf_id > 0 && $client.lineState == 1"}{$kfPhotoOnLine}{elseif condition="isset($client.kf_id) && $client.kf_id > 0 && $client.lineState == 0"}{$kfPhotoOffLine}{elseif condition="$client.lineState == 1"}{$userPhotoOnLine}{else}{$userPhotoOffLine}{/if}"/>
                    {if condition="isset($client.no_skim) && $client.no_skim neq 0"}
                    <span class="tips">1</span>
                    {/if}
                    <div class="left info">
                        <a href="{:url('chat')}?pid={$client.enc_client_id}">
                        <div class="name"><span>{if condition="isset($client.kf_id) && $client.kf_id > 0"}客服{else}用户{/if}</span> {$client.nickname} <em style="color: #CCCBD9;font-size: 0.24rem">{if condition="$client.lineState == 1"}在线{else}离线{/if}</em></div>
                        <div class="rec">{if condition="isset($client.motto)"}{$client.motto}{elseif condition="$client.lineState == 1"}在线{else}不在线{/if}</div>
                        </a>
                    </div>
                    <div class="right del"></div>
                    <div class="clearfix"></div>
                </dd>
                {/foreach}
            </dl>
        </div>
    </div>
</body>
</html>
<script src="__mobile_static__/js/listenSocket.js"></script>
<script>
    var userPhoto = {
        //在线离线状态头像
        userPhotoOnLine : '{$userPhotoOnLine}',
        userPhotoOffLine : '{$userPhotoOffLine}',
        kfPhotoOnLine : '{$kfPhotoOnLine}',
        kfPhotoOffLine : '{$kfPhotoOffLine}',
    };
    var socket = new ListSocket();
    socket.init({
        //socketip
        socket_ip : "{$domain_ip}",
        //客户端id绑定该用户
        url_bind_user    : '{:url("bind_user")}',
        when_user_off    : when_user_off,
        when_user_on     : when_user_on,
    });


    //当某个人下线
    function when_user_off(data,my_client_id)
    {
        //我下线了
        if(my_client_id == data.client_id)
        {
            alert('由于长时间没有通话，您已被系统下线');
        }
        else
        {
            //某个用户下线了
            var client =  $('.client_list dd[venderid = '+data.client_id+']');
            client.find('.name em').html('离线');
            if(client.attr('is_kf') == 1)
            {
                client.find('.userPhoto').attr('src',userPhoto.kfPhotoOffLine);
            }
            else
            {
                client.find('.userPhoto').attr('src',userPhoto.userPhotoOffLine);
            }
        }
    }

    //当某个人上线
    function when_user_on(data)
    {
        var client =  $('.client_list dd[venderid = '+data.client_id+']');
        client.find('.name em').html('在线');
        if(client.attr('is_kf') == 1)
        {
            client.find('.userPhoto').attr('src',userPhoto.kfPhotoOnLine);
        }
        else
        {
            client.find('.userPhoto').attr('src',userPhoto.userPhotoOnLine);
        }
    }




</script>